import React, { Component } from 'react'
import { connect } from 'react-redux'

import { fetchArticle } from "../actions"

import ArticlesCreateTime from '../../articles/components/ArticlesCreateTime'
import ArticlesVisitNum from '../../articles/components/ArticlesVisitNum'

import Loading from '../../../components/Loading'

import './article.less'

@connect((state)=>({
  article: state.get('article').get('detail'),
  isFetching: state.get('article').get('isArticleFetching')
}))

export default class Article extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const {params, dispatch} = this.props
    dispatch(fetchArticle(params.articleId))
  }

  render() {
    const { article, isFetching } = this.props
    return (
      <div>
        {isFetching ? this.renderIfFetching() : this.renderIfComplete()}
      </div>
    )
  }

  renderIfFetching() {
    return (
      <Loading></Loading>
    )
  }

  renderIfComplete() {
    const { article } = this.props
    return (
        <iframe
          src={article.get('content_url')}
          className="article-iframe">
        </iframe>
      )
  }
}